<template>
  <div id="index-l">
    <div class="index-l-1 index-l-0">
        <ul class="index-ul">
            <div class="top-s">访客信息</div>
            <div class="set-con set-flex">
                <div class="index-li">
                    <li v-for="(item , index) in dataList" :key="index">
                        <div class="index-l-1-n">
                            <span :style="{ color: item.sizeColor }" style="height: 3px;font-size: 30px;">{{item.num}}</span>
                            <div class="icon-s">
                                <img :src="item.srcImg" />
                            </div>
                            <p>{{ item.title }}</p>
                        </div>
                    </li>
                </div>
            </div>
        </ul>
    </div>

    <div class="index-l-4 index-l-0">
        <ul class="index-ul char">
            <div class="top-s">车辆信息</div>
            <div class="set-con">
                <div :style="fontSizeFun" class="index-l-4-echarts" ref="reachRefOne"></div>
            </div>
        </ul>
    </div>

    <div class="index-l-4 index-l-0">
        <ul class="index-ul char">
            <div class="top-s">人员通行</div>
            <div class="set-con">
                <div :style="fontSizeFun" class="index-l-4-echarts" ref="reachRefTwo"></div>
            </div>
        </ul>
    </div>
  </div>
</template>

<script>
import bz from './img/bz.png'
import * as echarts from 'echarts'
export default {
  name: 'index-l',
  data() {
    return {
        dataList: [{
            num: '23982', srcImg: bz , title: '访客人数' , sizeColor: '#006BFF'
        },{
            num: '26', srcImg: bz , title: '日访客户' , sizeColor: '#00E5FF'
        },{
            num: '280', srcImg: bz , title: '月访客户' , sizeColor: '#FFB300'
        }]
    };
  },
  components: {},
  mounted() {
    let that = this
    that.$nextTick(() => {
        that.fontSizeFun(14)
        that.initChartsOne()
        that.initChartsTwo()
    })
  },
  methods: {
    fontSizeFun(val,initWidth=1920){
        const nowClientWidth = document.documentElement.clientWidth
        return val * (nowClientWidth/initWidth) + 'px'
    },
    initChartsOne(){
        let myChart = echarts.init(this.$refs.reachRefOne)
        window.addEventListener('resize',() => {
            myChart.resize()
        })
        let option = {
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'line',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                show: true,
                data:['日车流量','停车位','临时车辆','员工车辆'],
                top: '5%',
                orient: 'horizontal',
                icon: 'circle',
                textStyle:{
                    color: '#FFFFFF',
                }
            },
            grid: {
                left: '3%',
                right: 10,
                bottom: 4,
                top: 40,
                containLabel: true,
                borderColor: 'rgb(61,61,61)'
            },
            xAxis: {
                type: 'category',
                boundaryGap : true,
                // position: 'bottom',
                // data: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'],
                data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.4)'
                    }
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    color: "rgba(255,255,255,1)",
                    margin: 10,
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: "rgba(255,255,255,0.06)"
                    }
                }
            },
            yAxis: {
                type: 'value',
                min: '0',
                max: '1000',
                interval: 500,
                axisTick: {
                    show: false,
                },
                axisLabel: {
                   color: "rgba(255,255,255,1)"
                },
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,0.14)"
                    }
                },
                splitArea:{
                    show: false,
                    areaStyle:{
                        color: 'rgba(255,255,255,0.02)',
                    }
                },
            },
            series: [
                {
                    name: '日车流量',
                    // data: [480, 520, 630, 310,460, 570, 690,480, 520, 630, 310,460, 570, 690,570],
                    data: [480, 520, 380, 430,360, 480, 420,480, 440, 460, 440,460],
                    type: 'line',
                    showBackground: true,
                    showSymbol: false,
                    smooth: true,
                    backgroundStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    },
                    barWidth:'20%',
                    label: {
                        show: false,
                        // position: 'left',
                        offset: [],
                        formatter: '{c}%',
                        textStyle: {
                            color: '#14E0FF',
                            // fontSize: 14,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color:'#00FF28',
                        }
                    },
                    lineStyle: {
                        color: '#00FF28',
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[
                                {
                                    offset: 0, 
                                    color: 'rgba(0,255,40,0.4)'
                                },
                                {
                                    offset: 1, 
                                    color: 'rgba(0,255,40,0)'
                                }
                            ]),
                        }
                    },
                },
                {
                    name: '停车位',
                    // data: [340, 780, 620, 430,540, 320, 510,340, 780, 620, 430,540, 320, 510,320],
                    data: [580, 520, 480, 530,460, 580, 420,580, 540, 460, 540,560],
                    type: 'line',
                    showBackground: true,
                    showSymbol: false,
                    smooth: true,
                    backgroundStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    },
                    barWidth:'20%',
                    label: {
                        show: false,
                        // position: 'left',
                        offset: [],
                        formatter: '{c}%',
                        textStyle: {
                            color: '#14E0FF',
                            // fontSize: 14,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#00DBFF',
                        }
                    },
                    lineStyle: {
                        color: '#00DBFF',
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[
                                {
                                    offset: 0, 
                                    color: 'rgba(0,219,255,0.4)'
                                },
                                {
                                    offset: 1, 
                                    color: 'rgba(0,219,255,0)'
                                }
                            ]),
                        }
                    },
                },
                {
                    name: '临时车辆',
                    // data: [940, 820, 850, 430,570, 500, 610,940, 820, 850, 430,570, 500, 610,570],
                    data: [680, 620, 680, 530,660, 680, 420,680, 540, 660, 540,660],
                    type: 'line',
                    showBackground: true,
                    showSymbol: false,
                    smooth: true,
                    backgroundStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    },
                    barWidth:'20%',
                    label: {
                        show: false,
                        // position: 'left',
                        offset: [],
                        formatter: '{c}%',
                        textStyle: {
                            color: '#14E0FF',
                            // fontSize: 14,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#0043FF',
                        }
                    },
                    lineStyle: {
                        color: '#0043FF',
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[
                                {
                                    offset: 0, 
                                    color: 'rgba(0,67,255,0.4)'
                                },
                                {
                                    offset: 1, 
                                    color: 'rgba(0,67,255,0)'
                                }
                            ]),
                        }
                    },
                },
                {
                    name: '员工车辆',
                    // data: [670, 540, 780, 650,890, 570, 320,670, 540, 780, 650,890, 570, 320,450],
                    data: [670, 540, 680, 550,690, 670, 520,670, 540, 780, 650,590],
                    type: 'line',
                    showBackground: true,
                    showSymbol: false,
                    smooth: true,
                    backgroundStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    },
                    barWidth:'20%',
                    label: {
                        show: false,
                        // position: 'left',
                        offset: [],
                        formatter: '{c}%',
                        textStyle: {
                            color: '#14E0FF',
                            // fontSize: 14,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#FFB300',
                        }
                    },
                    lineStyle: {
                        color: '#FFB300',
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient( 0, 0, 0, 1,[
                                {
                                    offset: 0, 
                                    color: 'rgba(255,179,0,0.4)'
                                },
                                {
                                    offset: 1, 
                                    color: 'rgba(255,179,0,0)'
                                }
                            ]),
                        }
                    },
                }
            ]
        }
        return option && myChart.setOption(option)
    },
    initChartsTwo(){
        let myChart = echarts.init(this.$refs.reachRefTwo)
        window.addEventListener('resize',() => {
            myChart.resize()
        })
        let option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}：共{c}<br/>所在比率：{d}%',
                position: function (point, params, dom, rect, size) {
                    //  size为当前窗口大小
                    if ((size.viewSize[0] / 2) >= point[0]) {
                        //其中point为当前鼠标的位置
                        return [point[0] + 50, '10%'];
                    } else {
                        //其中point为当前鼠标的位置
                        return [point[0] - 200, '10%'];
                    }
                }
            },
            legend: {
                top: 'bottom',
                data: [
                    {name: '员工进场次数',icon: 'circle',textStyle:{color:'#FFFFFF'}},
                    {name: '员工离场数据',icon: 'circle',textStyle:{color:'#FFFFFF'}},
                    {name: '进出时间数据',icon: 'circle',textStyle:{color:'#FFFFFF'}},
                ],
            },
            grid: {
                left: '3%',
                right: 10,
                bottom: 4,
                top: 40,
                containLabel: true,
            },
            series: [
                {
                    type: 'pie',
                    radius: [20, 60],
                    center: ['50%', '38%'],
                    roseType: 'area',
                    itemStyle: {
                        barBorderRadius: 3,
                    },
                    data: [
                        { value: 66, name: '员工进场次数',itemStyle:{color:'#00FF28'} },
                        { value: 66, name: '员工离场数据',itemStyle:{color:'#00DBFF'} },
                        { value: 40, name: '进出时间数据',itemStyle:{color:'#FFB300'} }
                    ],
                    label: {
                        color: '#FFFFFF',
                    },
                    emphasis: {
                        itemStyle: {
                            shadowColor: 'rgba(0,0,0,0)'
                        }
                    }
                }
            ]
        }
        return option && myChart.setOption(option)
    },
  },
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar{
    width: 2px;
    height: 2px;
}
::-webkit-scrollbar-track {
    background: rgba($color: #f3f4f9, $alpha: 0.1);
    border-radius: 2px;
}
::-webkit-scrollbar-thumb {
    background: rgba($color:  #c8d2e0, $alpha: 0.1);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba($color:   #b4b4b4, $alpha: 0.1);
}
::-webkit-scrollbar-corner {
    background: rgba($color:    #c8d2e0, $alpha: 0.1);
}
// 火狐
* {
    scrollbar-color: #c8d2e0 #f3f4f9;
    /* 滑块颜色  滚动条背景颜色 */
    scrollbar-width: thin;
    /* 滚动条宽度有三种：thin、auto、none */
}
.set-con{
    width: 100%;
    height: 78%;
    overflow: hidden;
}
.set-con:hover{
    overflow: hidden;
}
.set-flex{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#index-l{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    ul{
        margin: 0;
        padding: 0;
    }
    li{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .index-l-0{
        // margin-bottom: 10px;
        height: 32.7%;
    }
    .char{
        height: 100%;
        .index-l-4-echarts{
            width: 100%;
            height: 100%;
        }
    }
    .index-ul{
        background: rgba($color: #0F2F5C, $alpha: 0.2);
        width: 100%;
        height: 100%;
        padding-bottom: 10px;
        .top-s{
            padding: 10px 0 10px 10px;
            font-weight: 600;
            // font-size: 14px;
            font-style: oblique;
            background: rgba($color: #153863, $alpha: 0.4);
        }
        // 安全生产天数
        .index-li{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            li{
                width: 32%;
                img{
                    display: block;
                    margin: auto;
                    width: 75%;
                }
            }
            .index-l-1-n{
                span{
                    display: block;
                    width: 100%;
                    text-align: center;
                    // font-size: 14px;
                    font-weight: 600;
                    margin-top:10px;
                }
                p{
                    width: 100%;
                    text-align: center;
                    margin-top: 8px;
                    // font-size: 14px;
                }
            }
        }

        // 人员信息
        .index-r{
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            align-items: center;
            width: 96%;
            border: 1px solid rgb(2,123,236);
            margin: 10px auto 0 auto;
            .index-r-title{
                width: 30%;
                span{
                    display: block;
                    color: #00E5FF;
                    font-size: 14px;
                    font-weight: 600;
                    font-style: oblique;
                    width: 100%;
                    text-align: center;
                    background: rgb(8 ,70 ,143);
                    padding: 5px 0;
                }
                p{
                    width: 100%;
                    font-size: 14px;
                    text-align: center;
                    background: rgb(3 ,44 ,90);
                    padding: 5px 0;
                    .index-r-p{
                        font-weight: 600;
                        margin-left: 4px;
                    }
                }
            }
            .index-r-s{
                width: 30%;
                span{
                    display: block;
                    width: 100%;
                    text-align: center;
                    i{
                        color: #00FF28;
                        margin-left: 4px;
                    }
                }
            }
            .line{
                width: 1px;
                height: 24px;
                background: linear-gradient(to top, rgba($color: #0A275D, $alpha: 0) 0%,#00E5FF 50%, rgba($color: #0A275D, $alpha: 0) 100%);
            }
        }
    }
}
</style>